<div id="accordion">
<div class="card">
    <div class="card-header">
        <h4 class="card-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOrganizations">Organizations</a></h4>
        <div class="card-tools">
            <span id="organizations-count" data-toggle="tooltip" title="?" class="badge bg-primary">?</span>
        </div>
    </div>
    <div id="collapseOrganizations" class="panel-collapse collapse in">
    <div class="card-body p-0">
        <table id="organizations-table" class="table table-sm table-hover table-striped table-head-fixed">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    </div>
</div>
</div>
<script type="text/html" id="organizations-template">
  <td style="width: 20px;" align=middle>{{{logo}}}</td>
  <td>{{formalName}}</td>
  <td>{{country}}</td>
</script>
<script type="text/javascript">
registerContestObjectTable("organizations");

$(document).ready(function () {
	$.when(contest.loadOrganizations()).done(function () {
        fillContestObjectTable("organizations", contest.getOrganizations());
    }).fail(function (result) {
    	console.log("Error loading orgs: " + result);
    })
})
</script>